<template>
  <div class="app-container">
    <el-collapse v-model="activeNames">
      <el-collapse-item title="展开/收回" name="1">
        <el-row>
          <el-col :span="12">
            <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
              <el-radio-button label="person">人员定位</el-radio-button>
              <el-radio-button label="car">车辆定位</el-radio-button>
            </el-radio-group>
            <el-row v-if="tabPosition=='person'">
              <el-form ref="personForm" :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="身份">
                  <el-select v-model="formInline.region" placeholder="身份">
                    <el-option label="员工" value="employee_user" />
                    <el-option label="外协人员" value="out_user" />
                    <el-option label="临时人员" value="temp_user" />
                  </el-select>
                </el-form-item>
                <el-form-item label="负责部门">
                  <el-select
                    v-model="formInline.depId"
                    style="width: 260px"
                    placeholder="请选择负责部门"
                    @change="changeDept"
                  >
                    <el-option
                      v-for="item in depts"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="部门">
                  <el-select v-model="formInline.dep" placeholder="部门">
                    <el-option label="区域一" value="shanghai" />
                    <el-option label="区域二" value="beijing" />
                  </el-select>
                </el-form-item>
                <el-form-item label="姓名">
                  <el-input v-model="formInline.user" placeholder="姓名" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('personForm')">创建</el-button>
                  <el-button @click="resetForm('personForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </el-row>
            <el-row v-else>
              <el-form ref="carForm" :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="车牌号">
                  <el-input v-model="formInline.user" placeholder="车牌号" />
                </el-form-item>
                <el-form-item label="驾驶员">
                  <el-input v-model="formInline.user" placeholder="驾驶员" />
                </el-form-item>
                <el-form-item label="车型">
                  <el-input v-model="formInline.user" placeholder="车型" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('carForm')">创建</el-button>
                  <el-button @click="resetForm('carForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-table
              border
              :data="tabPosition=='person'?personData:carData"
              height="150"
              style="width: 100%;"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column prop="date" label="日期" width="100" />
              <el-table-column prop="name" label="姓名" width="80" />
              <el-table-column prop="address" label="地址" />
              <el-table-column label="操作" width="80">
                <template slot-scope="scope">
                  <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">追踪</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import crudRtl from '@/api/pod/rtl'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import { getDepts } from '@/api/system/dept'
// import rrOperation from "@crud/RR.operation";
// import crudOperation from "@crud/CRUD.operation";
// import udOperation from "@crud/UD.operation";
// import pagination from "@crud/Pagination";

const defaultForm = {
  id: null,
  createTime: null,
  updateTime: null,
  createBy: null,
  updateBy: null,
  identity: null,
  name: null
}
export default {
  name: 'Rtl',
  // components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({
      title: '实时定位',
      url: 'api/rtl',
      sort: 'id,desc',
      crudMethod: { ...crudRtl }
    })
  },
  data() {
    return {
      permission: {
        add: ['admin', 'rtl:add'],
        edit: ['admin', 'rtl:edit'],
        del: ['admin', 'rtl:del']
      },
      formInline: {
        "depId": null
      },
      depts: [],
      tabPosition: 'person',
      personData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      carData: [
        {
          date: '2016-05-02',
          name: '车',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '车',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '车',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '车',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      activeNames: ['1'],
      rules: {
        createTime: [
          { required: true, message: '创建时间不能为空', trigger: 'blur' }
        ],
        updateTime: [
          { required: true, message: '更新时间不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created(){
    console.log("created****")
    this.getDepts()
  },
  methods: {
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    changeDept(item) {
    },
    getDepts() {
      console.log("方法****")
      getDepts().then(res => {
        this.depts = res.content
      }).catch(() => { })
    }
  }
}
</script>

<style scoped>
</style>
